<template>
  <div class="link-bar-box" :id="active?'active':''">
    <NuxtLink :to="link"><span :class="`iconfont ${icon}`"></span>{{ text }}</NuxtLink>
  </div>
</template>

<script>
export default {
  name: "header-link-bar",
  props: {
    link: {
      type: String
    },
    text: {
      type: String
    },
    icon: {
      type: String
    },
    active: {
      type: Boolean
    }
  },
  watch:{
  },
  mounted() {
  }
}
</script>

<style scoped lang="scss">
.link-bar-box a {
  color: var(--text-bar-color);
  font-weight: 900;
  font-size: 1.3rem;
}
.iconfont{
  font-size: 1.2rem;
  padding: 0 .3rem;
}
.link-bar-box a:hover {
  color: var(--text-bar-active-color);
}

#active a {
  color: var(--text-bar-active-color) !important;
}
</style>